import { defineComponent, reactive, ref } from "vue";
import styles from "./Notifys.module.scss";
import { IconFont } from "@nutui/icons-vue";
import { useStore as useInsureStore } from "@/store/insure";
import _ from "lodash";
export default defineComponent({
  props: {
    btn: {
      type: Boolean,
      default: true,
    }
  },
  emits: ['confirm'],
  setup(props: any, { expose, emit }) {
    const insureStore = useInsureStore();
    const state = reactive({
      isVisible: false,
      term_pact: [] as any[],
      read_actived: 0,
      timing: 5,
      timingInterval: null as any,
      termTabRefs: [] as any[],
    })
    const startTiming = () => {
      state.timing = 5;
      state.timingInterval = setInterval(() => {
        if (state.timing > 0) {
          state.timing--;
        }
        if (state.timing === 0) {
          clearInterval(state.timingInterval);
          state.timingInterval = null;
        }
      }, 1000)
    }
    const open = (term_pact: any[]) => {
      if (term_pact) {
        state.term_pact = term_pact;
      } else {
        state.term_pact = insureStore.state.term_pact;
      }
      state.term_pact.forEach(x => {
        state.termTabRefs.push(ref(null));
      })
      state.isVisible = true;
      // if (props.btn) {
      //   startTiming();
      // }
    }
    const close = () => {
      state.isVisible = false;
    }
    const closed = () => {
      state.timing = 5;
      state.read_actived = 0;
      if (props.btn) {
        clearInterval(state.timingInterval);
        state.timingInterval = null;
      }
    }
    const navClick = (idx: number) => {
      if (!props.btn || idx < state.read_actived) {
        activedChange(idx);
      }
    }
    const activedChange = (idx: number) => {
      state.read_actived = -1;
      setTimeout(() => {
        state.read_actived = idx;
      }, 300)
      state.termTabRefs[idx].value.scrollIntoView({
        block: 'start',
        behavior: 'smooth',
      })
    }
    const confirm = _.debounce(() => {
      // if (state.timing > 0) {
      //   return;
      // }
      if (state.read_actived < state.term_pact.length - 1) {
        activedChange(state.read_actived + 1);
        // startTiming();
        return;
      }
      emit('confirm');
    }, 500, { leading: false, trailing: true })
    expose({
      open,
      close,
    })
    return () => (
      <nut-popup style={{ width: '100%', height: '100%' }} position="bottom" v-model:visible={state.isVisible} onClose={closed}>
        <div class={styles.notifys}>
          <div class={styles.header}>
            <div class={styles['tool']}></div>
            <span class={styles.title}>您需要阅读以下内容</span>
            <div class={styles['tool']} onClick={() => { state.isVisible = false }}>
              <IconFont name="close" size="0.4rem" color="#bbb"></IconFont>
            </div>
          </div>
          <div class={styles.navs}>
            {
              state.term_pact.map((item: any, idx: number) => (
                <div ref={state.termTabRefs[idx]} class={[styles['popup-nav'], state.read_actived === idx && styles.checked]} onClick={() => { navClick(idx) }}>
                  {item.name}
                </div>
              ))
            }
          </div>
          <div class={styles.container}>
            {
              state.term_pact.map((item: any, idx: number) => (
                state.read_actived === idx && <div class={[styles['popup-container']]}>
                  <div class={styles['notify-page']} v-html={item.content}></div>
                </div>
              ))
            }
          </div>
          {
            props.btn && <div class={styles.footer} onClick={confirm}>
              我已逐页完整阅读并同意所有信息
              {/* <span v-show={state.timing !== 0}>
                {'('}{state.timing.toString().padStart(2, '0')}s{')'}
              </span> */}
            </div>
          }
        </div>
      </nut-popup>
    )
  }
})